<template>
	<section class="page">
		<div class="box-left" style="background: linear-gradient(90deg, #005fff, #0092ff); height:60px; font-size: 24px; color: #fff; ">
			<img style="margin: 0 15px;" src="res/frame/logo.png" />
			驾驶人自助体检系统 
		</div>
		<div style="text-align: left; display: flex; ">
			<div class="group">
				<div class="menu" v-for="( menu) in menus.filter(item=>item.group == 0)" :key='menu.path' style="width:300px;">
					<a  :class="{link:menu.level==3}"  v-if="menu.name " @click="goto(menu.url )" 
					:style="{'padding-left':(menu.level * 2)+'rem', }" >
						{{menu.name || menu.path }} 
					</a>
				</div> 
			</div>
			<div class="group">
			 	<div class="menu" v-for="( menu) in menus.filter(item=>item.group == 1)" :key='menu.path' style="width:300px;">
			 		<a  :class="{link:menu.level==3}"   v-if="menu.name " @click="goto(menu.url )" 
			 		:style="{'padding-left':(menu.level * 2)+'rem', }" >
			 			{{menu.name || menu.path }} 
			 		</a>
			 	</div> 
			 </div>
			 
			 <div class="group">
			  	<div class="menu" v-for="( menu) in menus.filter(item=>item.group == 2)" :key='menu.path' style="width:300px;">
			  		<a  :class="{link:menu.level==3}"   v-if="menu.name " @click="goto(menu.url )" 
			  		:style="{'padding-left':(menu.level * 2)+'rem', }" >
			  			{{menu.name || menu.path }} 
			  		</a>
			  	</div> 
			  </div>
		</div>
	</section>
</template>

<script>
	export default {
		data(){ 
			return { 
				menus: []
			}
		},
		
		created(){
			 window.routers.forEach((item)=>{
				 item.level = 1;
				 item.index = this.menus.length;
				 item.group = parseInt( item.index / 27)
				 item.url = item.path;
				 this.menus.push(item);
				 if(!item.children)
					return;
				 item.children.forEach((item2)=>{
					 item2.level = 2;
					 item2.index = this.menus.length;
					 item2.group = parseInt( item2.index / 27)
					 item2.url = item.path + '/' + item2.path;
					 this.menus.push(item2);
					 if(!item2.children)
					 	return;
					 item2.children.forEach((item3)=>{
						 item3.level = 3;
						 item3.index = this.menus.length;
						 item3.group = parseInt( item3.index / 27)
						 item3.url = item.path + '/' + item2.path +'/' + item3.path;
						 this.menus.push(item3);
					 })
				 })
			 })
		},
		
		methods:{
			goto(path){
				this.$router.push(path)
			}
		}
	}
</script>

<style scoped="scoped">
	.menu{
		padding: 0.3rem;
		font-size: 1rem;
	}
	
	.group{ 
		flex:1;
		border:solid 1px #ddd;
	}
	
	.link{
		color:#005FFF;
	}
</style>
